<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>百慧智慧wms仓库</title>
    <link href="../layui/css/layui.css" rel="stylesheet">
    <link href="../css/warehouse.css" rel="stylesheet">
</head>
<body>
<div class="layui-container" style="margin-top: 20px;">
    <!-- 条件搜索 -->
    <div class="layui-row">
        <div class="layui-col-md6">
            <div class="layui-row">
                <div class="layui-col-md8 hxx-supplier">
                    <!--货物编号，带搜索框的下拉-->
                    <div class="layui-row">
                        <div class="layui-form-item">
                            <label class="layui-form-label">客户</label>
                            <div class="layui-input-block" id="customerId">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-row">
                <div class="layui-col-md8 hxx-product">
                    <!--货物名称，带搜索框的下拉-->
                    <div class="layui-row">
                        <div class="layui-form-item">
                            <label class="layui-form-label">出库货物</label>
                            <div class="layui-input-block" id="productNameId">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 信息展示,展示和隐藏 -->
    <div class="layui-fluid">
        <div class="layui-collapse" style="border-style: none;">
            <div class="layui-colla-item">
                <h4 class="layui-colla-title" style="line-height: 30px;height: 30px;">展示 | 隐藏</h4>
                <div class="layui-colla-content" style="border-top-style: none;">
                    <div class="layui-row">
                        <div class="layui-col-md6">
                            <!--客户详情-->
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <h4 style="color: #31BDEC;font-weight: bold;">客户信息</h4>
                                </div>
                                <div class="layui-col-md12">
                                    <div class="layui-row">
                                        <div class="layui-col-md6">
                                            <!-- 供应商ID -->
                                            <div class="layui-inline">
                                                <label class="layui-form-label">客户编号:</label>
                                                <div class="layui-form-value customerId">
                                                    -
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-md6">
                                            <!-- 供应商名称 -->
                                            <div class="layui-inline">
                                                <label class="layui-form-label">客户名称:</label>
                                                <div class="layui-form-value customerName">
                                                    -
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- |||||||||||||||||||||| -->
                                    <div class="layui-row">
                                        <div class="layui-col-md6">
                                            <!-- 供应商ID -->
                                            <div class="layui-inline">
                                                <label class="layui-form-label">负责人:</label>
                                                <div class="layui-form-value customerLeader">
                                                    -
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-md6">
                                            <!-- 供应商名称 -->
                                            <div class="layui-inline">
                                                <label class="layui-form-label">联系电话:</label>
                                                <div class="layui-form-value customerTel">
                                                    -
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- |||||||||||||||||||||| -->
                                    <div class="layui-row">
                                        <div class="layui-col-md6">
                                            <!-- 供应商ID -->
                                            <div class="layui-inline">
                                                <label class="layui-form-label">电子邮件:</label>
                                                <div class="layui-form-value customerEmail">
                                                    -
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-md6">
                                            <!-- 供应商名称 -->
                                            <div class="layui-inline">
                                                <label class="layui-form-label">联系地址:</label>
                                                <div class="layui-form-value customerAddress">
                                                    -
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <!--货物详情-->
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <h4 style="color: #31BDEC;font-weight: bold;">货物信息</h4>
                                </div>
                                <div class="layui-col-md12">
                                    <div class="layui-row">
                                        <div class="layui-col-md6">
                                            <!-- 货物编号 -->
                                            <div class="layui-inline">
                                                <label class="layui-form-label">货物编号:</label>
                                                <div class="layui-form-value productId">
                                                    -
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-md6">
                                            <!-- 货物名称 -->
                                            <div class="layui-inline">
                                                <label class="layui-form-label">货物名称:</label>
                                                <div class="layui-form-value productName">
                                                    -
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- |||||||||||||||||||||| -->
                                    <div class="layui-row">
                                        <div class="layui-col-md6">
                                            <!-- 货物类型 -->
                                            <div class="layui-inline">
                                                <label class="layui-form-label">货物类型:</label>
                                                <div class="layui-form-value categoryId">
                                                    -
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-md6">
                                            <!-- 货物价值 -->
                                            <div class="layui-inline">
                                                <label class="layui-form-label">货物价格:</label>
                                                <div class="layui-form-value productPrice">
                                                    ￥-.--
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- |||||||||||||||||||||| -->
                                    <div class="layui-row">
                                        <div class="layui-col-md6">
                                            <!-- 货物尺寸 -->
                                            <div class="layui-inline">
                                                <label class="layui-form-label">货物尺寸:</label>
                                                <div class="layui-form-value productSize">
                                                    -
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-md6">
                                            <!-- 货物库存 -->
                                            <div class="layui-inline">
                                                <label class="layui-form-label">货物库存:</label>
                                                <div class="layui-form-value stock">
                                                    -
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- 出库的仓库 -->
    <div class="layui-row">
        <!-- 下拉列表 -->
        <div class="layui-col-md6">
            <div class="layui-row">
                <div class="layui-col-md8 hxx-supplier">
                    <!--仓库，带搜索框的下拉-->
                    <div class="layui-row">
                        <form class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">入库仓库</label>
                                <div class="layui-input-block" id="repoId">

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 出库数量 -->
    <div class="layui-row">
        <!-- 左侧输入框,右侧显示当前库存 -->
        <div class="layui-col-md6">
            <div class="layui-row">
                <div class="layui-col-md12 hxx-supplier">
                    <!--供应商，带搜索框的下拉-->
                    <div class="layui-row">
                        <form class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">出库数量</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="stockNum" required lay-verify="required" placeholder="请输入数量" autocomplete="off" class="layui-input">
                                </div>
                                <div style="display: none" class="repo_id"></div><!-- 隐藏域保存仓库ID -->
                                <div class="layui-form-mid layui-word-aux repo_stock">当前库存:-)</div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 提交按钮 -->
    <div class="layui-row">
        <div class="layui-col-md12" style="text-align: right;">
            <!--按钮靠最右侧,整行显示面板状态-->
            <button class="layui-btn layui-btn-primary layui-border-blue repo-sum-stock">提交出库</button>
        </div>
    </div>
</div>


<script src="../layui/layui.js"></script>
<script src="../js/xm-select.js"></script>
<script>

    layui.use(["jquery","form","layer"],function () {

        let $ = layui.jquery;
        let layer = layui.layer;

        //提交出库
        $(".repo-sum-stock").click(function () {

            //获取仓库ID
            let repoId = $(".repo_id").html();
            //获取产品ID
            let productId = $(".productId").html();
            //获取客户ID
            let customerId = $(".customerId").html();
            //获取入库数量
            let stockNum = $("input[name='stockNum']").val();
            //入库负责人(从cookie中获取当前登录的userId)
            let cookies = document.cookie;
            let c={};
            if(!!cookies){
                let cs = cookies.split(";");
                if(!!cs){
                    for (let i = 0; i < cs.length; i++) {
                        if(!!cs[i]){
                            let kv = cs[i].split("=");
                            c[kv[0].trim()]=kv[1];
                        }
                    }
                }
            }
            //当前登录的用户ID
            let userId=c.userId;
            if(!!userId && !!repoId && productId && !!stockNum && !!customerId){ //不为空
                let rs={userId:userId,repoId:repoId,productId:productId,productStock:stockNum,customerId:customerId};
                $.ajax({
                    url:"/outRecordStock",
                    method:"post",
                    data:JSON.stringify(rs),
                    contentType:"application/json",
                    success:function (d){
                        if(d.code===0){
                            layer.msg("出库成功,当前库存为【"+d.obj.productStock+"】");
                            //修改库存显示
                            $(".repo_stock").html("当前库存: "+d.obj.productStock);
                            //清空更新数量
                            $("input[name='stockNum']").val("");
                        }else{
                            layer.msg(d.msg);
                        }
                    }
                });
            }else{
                if(!!userId==false){
                    layer.msg("请先登录");
                }
                if(!!repoId==false){
                    layer.msg("请选择仓库");
                }
                if(!!productId==false){
                    layer.msg("请选择产品");
                }
                if(!!stockNum==false){
                    layer.msg("请填出库数量");
                }
                if(!!customerId==false){
                    layer.msg("请选择客户");
                }
            }
        });

        //获取仓库列表
        xmSelect.render({
            el:"#repoId",
            filterable: true,/*开启搜索模式*/
            remoteSearch: true, /* 开启远程搜索 */
            max: 1, /* 选择一条 */
            tips:"仓库名称",/* 背景提示 */
            searchTips:"搜索仓库",/*搜索提示*/
            prop:{  /*修改下拉框默认属性*/
                name:"repoName",
                value:"repoId"
            },
            theme: { /*主题*/
                color: '#0081ff',
            },
            remoteMethod: function(val, cb, show){
                //这里如果val为空, 则不触发搜索
                if(!val){
                    return cb([]);
                }
                /* 通过API获取数据 */
                $.getJSON("/getRepositoryList",{repoName:val},function (d) {
                    if(d.code!=0){
                        layer.msg(d.msg);
                    }else{
                        cb(d.obj);
                    }
                });
            },
            on:function (val){
                if(val!=null && val!="undefined" && val.arr!=null && val.arr!="undefined" && val.arr.length>0){
                    //数据存在,获取第一个
                    let repoId = val.arr[0].repoId;
                    //获取产品ID
                    let productId = $(".productId").html();
                    if(repoId!=null && repoId!="undefined" && productId!=null && productId!="undefined"){

                        //判断productId是否为数值型
                        if(!isNaN(productId)){
                            //查询库存
                            $.getJSON("/getProduct",{productId:productId,repoId:repoId},function (d){
                                if(d.code===0){
                                    //获取产品详情信息
                                    let stock = d.obj!=null?d.obj.stock:0;
                                    $(".repo_stock").html("当前库存: "+stock);
                                    $(".repo_id").html(repoId);//将仓库ID保存到隐藏域中,为后面提交入库做准备
                                }
                            });
                        }else{
                            //如果非数字,提示用户选择产品
                            layer.msg("请选择产品");
                            setTimeout(function () {
                                location.reload();//刷新页面,重新选择数据
                            },900)
                        }

                    }
                }
            }
        });
        //生成获取下拉框
        xmSelect.render({
            el:"#customerId",
            filterable: true,/*开启搜索模式*/
            remoteSearch: true, /* 开启远程搜索 */
            max: 1, /* 选择一条 */
            tips:"客户名称",/* 背景提示 */
            searchTips:"搜索客户名称",/*搜索提示*/
            prop:{  /*修改下拉框默认属性*/
                name:"customerName",
                value:"customerId"
            },
            theme: { /*主题*/
                color: '#0081ff',
            },
            remoteMethod: function(val, cb, show){
                //这里如果val为空, 则不触发搜索
                if(!val){
                    return cb([]);
                }
                /* 通过API获取数据 */
                $.getJSON("/getCustomerList",{customerName:val},function (d) {
                    if(d.code!=0){
                        layer.msg(d.msg);
                    }else{
                        cb(d.obj);
                    }
                });
            },
            on:function (val){
                //判断数据是否存在,如果存在将其显示在隐藏/显示区域
                if(val!=null && val!="undefined" && val.arr!=null && val.arr!="undefined" && val.arr.length>0){
                    //数据存在,获取第一个
                    let customer = val.arr[0];
                    console.log("customer==",customer);
                    //客户编号
                    $(".customerId").html(customer.customerId);
                    //客户名称
                    $(".customerName").html(customer.customerName);
                    //管理者
                    $(".customerLeader").html(customer.customerLeader);
                    //联系电话
                    $(".customerTel").html(customer.customerTel);
                    //邮箱
                    $(".customerEmail").html(customer.customerEmail);
                    //地址
                    $(".customerAddress").html(customer.customerAddress);

                }
            }
        });

        //生成产品下拉框
        xmSelect.render({
            el:"#productNameId",
            filterable: true,/*开启搜索模式*/
            remoteSearch: true, /* 开启远程搜索 */
            max: 1, /* 选择一条 */
            tips:"货物名称",/* 修改背景提示 */
            searchTips:"搜索货物名",/*搜索提示*/
            prop:{  /*修改下拉框默认属性*/
                name:"productName",
                value:"productId"
            },
            theme: { /*主题*/
                color: '#0081ff',
            },
            remoteMethod: function(val, cb, show){
                //这里如果val为空, 则不触发搜索
                if(!val){
                    return cb([]);
                }
                /* 通过API获取数据 */
                $.getJSON("/getProductList",{productName:val},function (d) {
                    if(d.code!=0){
                        layer.msg(d.msg);
                    }else{
                        cb(d.obj);
                    }
                });
            },
            on:function (val){
                //判断数据是否存在,如果存在将其显示在隐藏/显示区域
                if(val!=null && val!="undefined" && val.arr!=null && val.arr!="undefined" && val.arr.length>0){
                    //数据存在,获取第一个
                    let product = val.arr[0];
                    //获取产品信息
                    $.getJSON("/getProduct",{productId:product.productId},function (d){
                        if(d.code===0){
                            //获取产品详情信息
                            let p = d.obj;
                            //设置隐藏/显示信息
                            //产品编号
                            $(".productId").html(p.productId);
                            $(".productName").html(p.productName);
                            $(".categoryId").html(p.category.categoryName);
                            $(".productSize").html(p.productSize);
                            $(".productPrice").html("￥ "+p.productPrice);
                            $(".stock").html(p.stock);
                        }
                    });
                }
            }
        });
    });
</script>
</body>
</html>